import { Card, Col, Row } from 'antd';
import React from 'react';
import { useEffect } from 'react';
import { useState } from 'react';
import { statProduct, statUser } from "../../http/request";
import {
    UsergroupDeleteOutlined,
    AccountBookOutlined
} from '@ant-design/icons';



const App = () => {
    //产品
    const [Product, setProduct] = useState()
    //用户
    const [Users, setUsers] = useState()
    useEffect(() => {
        //请求产品数据
        statProduct().then(res => {
            // console.log(res.data.data);
            setProduct(() => res.data.data)
        })
        //请求用户数据
        statUser().then(res => {
            // console.log(res);
            setUsers(() => res.data.data)
        })
    }, [])

    return (
        <>
            <div div className="site-card-wrapper" >
                <Row gutter={16}>
                    <Col span={8}>
                        <Card title="商品总数量" bordered={true} style={{ fontSize: "30px" }}>
                            <AccountBookOutlined />
                            {Product}
                        </Card>
                    </Col>
                    <Col span={8}>
                        <Card title="用户总数量" bordered={true} style={{ fontSize: "30px" }}>
                            <UsergroupDeleteOutlined />
                            {Users}
                        </Card>
                    </Col>
                </Row>
            </div>
        </ >
    );
}

export default App;
